import React, { Component } from 'react';
import { Card, Button, message } from 'antd';

import './style.less';

class MessagePage extends Component {

  render() {
    return (
      <div className="pinlor-buttons">
        <Card title="通知提醒框" className="pinlor-cards">
          <Button type="primary" onClick={() => this.openMessage('success')}>Success</Button>
          <Button type="primary" onClick={() => this.openMessage('info')}>Info</Button>
          <Button type="primary" onClick={() => this.openMessage('warning')}>Warning</Button>
          <Button type="primary" onClick={() => this.openMessage('error')}>Error</Button>
          <Button type="primary" onClick={() => this.openMessage('loading')}>Loading</Button>
        </Card>
      </div>
    )
  }

  openMessage = type => {
    message[type]('恭喜React晋级成功')
  }
}

export default MessagePage;
